<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img id="drag1" src="https://www.runoob.com/images/img_the_scream.jpg" draggable="true" ondragstart="drag(event)"/>
		<div id="div1" style="width: 220px;height: 277px;border: 1px red solid;padding: 10px;"
		ondrop="drop(event)" ondragover="allowDrop(event)">
			
		</div>
		
		<script>
			function drag(ev){
				ev.dataTransfer.setData("Text",ev.target.id)
			}
			function allowDrop(ev){
				ev.preventDefault();
			}
			function drop(ev){
				ev.preventDefault();
				var data = ev.dataTransfer.getData("Text");
				ev.target.appendChild(document.getElementById(data));
			}
		</script>
	</body>
</html>